<template>
  <l-layout
    v-if="isShow"
    class="l-tab-page"
    :left="240"
    v-loading="pageLoading"
    :element-loading-text="$t('数据保存中')"
  >
    <template #left>
      <l-panel :title="$t('公司信息')" style="padding-right:0;">
        <el-tree
          v-loading="companyLoading"
          :data="lr_companyTree"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleCompanyClick"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            <i class="fa fa-sitemap"></i>
            {{ $t(node.label) }}
          </span>
        </el-tree>
      </l-panel>
    </template>
    <l-layout>
      <template #left>
        <l-panel
          :title="$t('部门信息')"
          style="padding-left:0;padding-right:0;"
        >
          <el-tree
            :data="departmentsTree"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleDepartmentClick"
          >
            <span class="lr-tree-node" slot-scope="{ node }">
              <i class="fa fa-sitemap"></i>
              {{ $t(node.label) }}
            </span>
          </el-tree>
        </l-panel>
      </template>
      <l-select-panel
        v-model="value"
        ref="selectPanel"
        valueKey="f_UserId"
        :columns="columns"
        :loadSelectTable="loadSelectTable"
        style="padding:8px;padding-left:0;"
      >
        <template v-slot:f_Gender="scope">
          <el-tag v-if="scope.row.f_Gender == 1" size="mini" type="success"
            >{{$t('男')}}</el-tag
          >
          <el-tag v-else size="mini" type="danger">{{$t('女')}}</el-tag>
        </template>
        <template v-slot:f_CompanyId="scope">
          {{
            (
              lr_companyList.find(
                (t) => t.f_CompanyId == scope.row.f_CompanyId
              ) || {}
            ).f_FullName || ""
          }}
        </template>
        <template v-slot:f_DepartmentId="scope">
          {{
            lr_departmentName(
              lr_departments[scope.row.f_CompanyId] || [],
              scope.row.f_DepartmentId
            )
          }}
        </template>
      </l-select-panel>
    </l-layout>
  </l-layout>
</template>
<script>
const api = window.$api.organization.userRelation;
const apiUser = window.$api.organization.user;
export default {
  data() {
    return {
      isShow: true,

      value: "",
      showType: 1,

      objectType: 1,
      objectId: undefined,
      pageLoading: false,

      companyId: "",
      departmentId: "",
      companyLoading: false,
      departmentLoading: false,

      columns: [
        { label: "姓名", prop: "f_RealName", minWidth: "110" },
        { label: "账号", prop: "f_Account", width: "110" },
        { label: "手机", prop: "f_Mobile", width: "108" },
        { label: "公司", prop: "f_CompanyId", minWidth: "120" },
        { label: "部门", prop: "f_DepartmentId", minWidth: "88" },
        { label: "性别", prop: "f_Gender", width: "56", align: "center" },
      ],
    };
  },
  computed: {
    departmentsTree() {
      return this.lr_departmentTree(this.lr_departments[this.companyId] || []);
    },
  },
  created() {
    this.companyInit();
  },
  methods: {
    async companyInit() {
      this.companyLoading = true;
      await this.lr_loadCompanys();
      this.companyLoading = false;
    },

    handleCompanyClick(node) {
      this.companyId = node.value;
      this.departmentId = "";
      this.lr_loadDepartments(this.companyId);
      this.tableLoadData();
    },
    handleDepartmentClick(node) {
      this.departmentId = node.value;
      this.tableLoadData();
    },

    tableLoadData() {
      this.$refs.selectPanel.init();
    },
    async loadSelectTable(postData) {
      this.showType = postData.showType;
      postData.sidx = "F_CreateDate DESC";
      if (postData.showType == 1) {
        postData.companyId = this.companyId;
        postData.departmentId = this.departmentId;
      } else {
        postData.page = 1;
      }

      const res = await apiUser.getPage(postData);
      const data = res.data.data;
      data.rows.forEach((item) => {
        this.lr_loadDepartments(item.f_CompanyId);
      });

      console.log(data, "这是data");
      return data;
    },

    resetForm() {
      this.value = "";
      this.companyId = "";
      this.departmentId = "";
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      });
      //this.$refs.selectPanel.reset()
    },
    async setForm(objectId, objectType) {
      this.objectId = objectId;
      this.objectType = objectType;
      let selectList = (await api.getList(this.objectId)).data.data;
      this.value = String(selectList.map((t) => t.f_UserId));
      this.tableLoadData();
    },

    async saveForm() {
      this.pageLoading = true;
      await api.save(this.objectId, this.objectType, { userIds: this.value });
      this.pageLoading = false;
    },
  },
};
</script>
